// 混合
@import "mixins/prefix.less";
@import "mixins/common.less";


.wrapper-box {
    padding: 20px;
    // background: rgba(255,255,255,.9);
    // .prefix-border-radius(10px);
    // .prefix-box-shadow(0 5px 50px 0 rgba(0,0,0,.2));
}
.wrapper-white {
    background-color: #fff;
    color: #333;
}


.vueapp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 0;
    overflow: hidden;
    // background: linear-gradient(left to right, #1bb3eb, #40f1d1);
    // .prefix-gradient(225deg, rgba(195, 55, 100, 1), rgba(29, 38, 113, 1));
    // .prefix-gradient(225deg, rgba(27, 179, 235, 1), rgba(64, 241, 209, 1));
    .prefix-gradient(~'225deg, rgba(142,84,233, 1), rgba(0,198,255, 1)');
    // .prefix-gradient(225deg, rgba(78,67,118, 1), rgba(43,88,118, 1));
    & > .wrapper {
        .prefix-transition(all ease-out .25s);
    }
    &.showleftpad {
        padding-left: 240px;
        & > .wrapper {
            left: 250px;
        }
    }
    &.showleftpad-small {
        padding-left: 60px;
        &>.wrapper {
            left: 70px;
        }
    }
    &.showrightpad {
        padding-right: 400px;
        &>.wrapper {
            right: 410px;
        }
    }
}
.topbar {
    height: 50px;
    // background: rgb(52, 138, 199);
    // .prefix-gradient(to right, rgb(116, 116, 191), rgb(52, 138, 199));
    // .prefix-gradient(to right, rgb(43, 192, 228), rgb(234, 236, 198));

    .navbar {
        position: relative;
        // padding-left: 20px;
        height: 50px;
        font-size: 0;
        // .prefix-box-shadow(0 2px 5px 1px rgba(0, 166, 124,.1));
        .navs {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            overflow: hidden;
        }
        .nav {
            display: inline-block;
            position: relative;
            padding: 0 25px 0 25px;
            height: 50px;
            font-size: 14px;
            font-weight: 700;
            line-height: 50px;
            // color: rgba(188, 255, 248, .8);
            color: rgba(255, 255, 255, .6);
            // color: transparent;
            // text-shadow: 0 0 2px #fff;
            cursor: default;
            text-decoration: none;
            overflow: hidden;
            .prefix-transition(all ease-out .3s);
            .close {
                position: absolute;
                top: 3px;
                right: 3px;
                opacity: 0;
                width: 16px;
                height: 16px;
                line-height: 16px;
                cursor: pointer;
                text-align: center;
                font-weight: 400;
                font-size: 14px;
                color: rgba(255, 255, 255, .6);
                background: rgba(0, 169, 180,.1);
                .prefix-border-radius(8px);
                .prefix-transition();
                &:hover {
                    color: rgba(255, 255, 255, 1);
                    background: rgba(0,0,0,.2);
                    .prefix-box-shadow(0 2px 5px 0 rgba(0, 169, 180, .5));
                }
            }
            &:hover {
                color: rgba(255,255,255,1);
                background: rgba(255,255,255,.2);
                .close {
                    opacity: 1;
                }
            }
            &.home,
            &.more {
                position: absolute;
                top: 0;
                bottom: 0;
                color: rgba(255, 255, 255, 1);
                padding: 0 16px;
                cursor: pointer;
                .iconfont {
                    font-size: 16px;
                    font-weight: 400;
                    vertical-align: middle;
                }
            }
            &.home {
                left: 0;
            }
            &.more {
                right: 0;
            }
            &.active {
                color: rgb(47, 156, 218);
                // color: rgba(109, 67, 123, 1);
                background: rgba(255,255,255,1);
                cursor: default;
                .close {
                    color: rgba(0, 169, 180, .6);
                    background: rgba(0, 169, 180, .1);
                    &:hover {
                        color: rgba(255, 255, 255, 1);
                        background: rgba(0, 169, 180, .6);
                    }
                }
            }
        }
        &.hashome {
            .navs {
                padding-left: 48px;
            }
        }
        &.hasmore {
            .navs {
                padding-right: 48px;
            }
        }
    }

    .searchbar {
        display: inline-block;
        position: relative;
        min-width: 130px;
        height: 50px;
        vertical-align: middle;
        .prefix-transition(min-width linear .15s);
        .searchbar-wrapper {
            display: block;
            position: absolute;
            top: 7px;
            left: 0;
            right: 0;
            bottom: 0;
            height: 36px;
            // background: rgba(82, 172, 200, .3);
            background: rgba(0, 0, 0, .08);
            // background: rgba(154, 45, 93, .3);
            .prefix-border-radius(18px);
            .prefix-transition(background linear .15s);
            // .prefix-box-shadow(inset 0 0 0 1px rgba(45, 135, 164, .05));
            .searchbar-box {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                padding-left: 35px;
                background-image: url(/public/images/search.svg);
                background-size: 22px 18px;
                background-position: 8px 9px;
                background-repeat: no-repeat;
                input {
                    width: 100%;
                    height: 36px;
                    background: transparent;
                    border: none;
                    outline: none;
                    font-size: 14px;
                    color: rgba(255,255,255,.9);
                    .prefix-placeholder(rgba(255,255,255,.4));
                }
            }
        }
        &.active {
            min-width: 150px;
            .searchbar-wrapper {
                background: rgba(0, 0, 0, .2);
            }
        }
    }
}
.layout-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    // background: rgba(240, 245, 255, .9);
    // background: rgba(255, 249, 251, 1);
    background: rgba(240, 253, 255, 1);
    // .prefix-gradient(240deg, rgba(255, 255, 255, .2), rgba(52, 138, 199, .2));
    // .prefix-gradient(240deg, rgba(116, 116, 191, .5), rgba(52, 138, 199, .8));
    // .prefix-box-shadow(0 5px 50px 0 rgba(0,0,0,.2));
    &.small {
        width: 60px;
        background: rgba(240, 245, 255, .2);
        .prefix-box-shadow(0 3px 8px 0 rgba(0,0,0,.1));
    }

    .leftpad {
        .avatarbox {
            display:inline-block;
            position: relative;
            width: 100%;
            height: 220px;
            // background: rgba(93, 128, 184, .7);
            background-image: url(/public/images/bg-star.png);
            &::before {
                content: "";
                opacity: .9;
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                // .prefix-gradient(0deg, rgb(12,235,235), rgb(32,227,178));
                // .prefix-gradient(25deg, rgb(0, 208, 255), rgb(0, 255, 196));
                .prefix-gradient(~'25deg, rgba(167, 111, 255, 1), rgba(0,198,255, 1)');
                // .prefix-gradient(25deg, rgba(195, 55, 100, 1), rgba(29, 38, 113, 1));
            }
            .avatarbox-content {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                .btn-toggle {
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: block;
                    padding: 0;
                    width: 50px;
                    height: 50px;
                    border: none;
                    cursor: pointer;
                    outline: none;
                    color: rgba(255,255,255,1);
                    background: rgba(255,255,255,0);
                    .prefix-appearance();
                    .prefix-transition();
                    i {
                        display: inline-block;
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        font-size: 22px;
                        color: rgba(255,255,255,.8);
                        .prefix-transform(rotate(-90deg));
                        .prefix-transition();
                        &::before {
                            position: relative;
                            top: 0;
                            .prefix-transition();
                        }
                        &.active {
                            .prefix-transform(rotate(90deg));
                            &:hover {
                                &::before {
                                    top: 3px;
                                }
                            }
                        }
                    }
                    &:hover {
                        background: rgba(255,255,255,.3);
                        i {
                            color: rgba(255,255,255,1);
                        }
                    }
                }
                .avatar-image {
                    position: relative;
                    top: 0;
                    margin: 60px auto 0;
                    width: 64px;
                    height: 64px;
                    background-color: rgba(255,255,255,.9);
                    background-repeat: no-repeat;
                    background-size: cover;
                    .prefix-border-radius(50px);
                    .prefix-transition();
                    &:hover {
                        top: -2px;
                        .prefix-box-shadow(3px 10px 30px 3px rgb(102, 255, 233,.1));
                    }
                }
                .avatar-name {
                    margin: 10px auto 0;
                    width: 160px;
                    text-align: center;
                    color: #fff;
                    font-size: 13px;
                    font-weight: 700;
                    .prefix-border-radius(12px);
                }
                .avatar-remark {
                    margin: 3px auto 0;
                    width: 160px;
                    text-align: center;
                    // color: rgb(144, 255, 227);
                    // color: rgb(195, 100, 146);
                    color: rgba(141, 177, 255, 1);
                    font-size: 13px;
                }
            }
        }

        .menusbox {
            position: absolute;
            top: 220px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
            .menus-group {
                .groupname {
                    margin: 25px 20px 0;
                    font-size: 12px;
                    color: rgb(0, 188, 182);
                    // color: rgb(0, 68, 90);
                }
                .menu {
                    .name {
                        position: relative;
                        display: block;
                        padding: 13px 20px;
                        font-size: 15px;
                        color: rgb(60, 122, 145);
                        // color: rgba(77, 49, 105, .8);
                        cursor: pointer;
                        text-decoration: none;
                        .prefix-transition();
                        &:hover,
                        &.active {
                            color: rgb(19, 74, 94);
                            // color: rgba(174, 58, 94, 1);
                        }
                        i {
                            margin-right: 10px;
                            font-size: 16px;
                        }
                    }
                    .child {
                        padding-left: 40px;
                        padding-bottom: 20px;
                    }
                    &.haschild {
                        .name {
                            padding: 5px 20px;
                        }
                        & > .name {
                            padding: 13px 20px;
                            &::after {
                                position: absolute;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                width: 50px;
                                height: 50px;
                                line-height: 50px;
                                text-align: center;
                                color: rgb(106, 148, 164);
                                font-family: "iconfont" !important;
                                font-size: 20px;
                                font-style: normal;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                                content: "\e64d";                           //
                                // .prefix-transform(rotate(90deg));        //旋转向下
                            }
                            &.active {
                                &::after {
                                    color: rgb(19, 74, 94);
                                }
                            }
                        }
                    }
                }
                & > .menu {
                    // border-bottom: 1px solid rgb(190, 226, 231);
                    border-bottom: 1px solid rgb(226, 246, 249);
                    // border-bottom: 1px solid rgba(255, 255, 255, .2);
                }
            }
        }
    }

    .leftpadsmall {
        overflow: visible;
        .btn-toggle {
            display: block;
            width: 100%;
            height: 50px;
            padding: 0;
            border: none;
            background: rgba(255,255,255,.2);
            cursor: pointer;
            outline: none;
            color: rgba(255,255,255,1);
            font-size: 24px;
            .prefix-appearance();
            .prefix-transition();
            i {
                display: inline-block;
                width: 50px;
                height: 50px;
                line-height: 50px;
                font-size: 22px;
                color: rgba(255,255,255,.8);
                .prefix-transform(rotate(90deg));
                .prefix-transition();
                &::before {
                    position: relative;
                    top: 0;
                    .prefix-transition();
                }
                &.active {
                    .prefix-transform(rotate(-90deg));
                    &::before {
                        top: 3px;
                    }
                    &:hover {
                        &::before {
                            top: 6px;
                        }
                    }
                }
            }
            &:hover {
                background: rgba(255,255,255,.3);
                i {
                    color: rgba(255,255,255,1);
                }
            }
        }

        .appsbar {
            margin: 0;
            padding: 0;
            .appsbar-item {
                position: relative;
                left: 0;
                margin: 20px auto;
                width: 40px;
                height: 40px;
                border: 1px solid rgba(255,255,255,.2);
                background-color: rgba(255,255,255,1);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 40px 40px;
                cursor: pointer;
                list-style: none;
                .prefix-border-radius(9px);
                .prefix-transition();
                .tip {
                    display: block;
                    opacity: 0;
                    position: absolute;
                    top: 7px;
                    left: 45px;
                    width: 0;
                    overflow: hidden;
                    height: 26px;
                    line-height: 26px;
                    white-space: nowrap;
                    font-size: 13px;
                    color: rgb(255,255,255);
                    background: rgba(0, 132, 176, .9);
                    .prefix-border-radius(13px);
                    // .prefix-gradient(25deg, rgba(0, 79, 147, .8), rgba(0, 166, 124, .9));
                    .prefix-gradient(~'25deg, rgba(113, 56, 238, .9), rgba(38, 155, 194, .9)');
                    // .prefix-gradient(25deg, rgba(195, 55, 100, 1), rgba(29, 38, 113, 1));
                    .prefix-transition();
                }
                &:hover {
                    left: 2px;
                    background-color: rgba(255,255,255,1);
                    .prefix-box-shadow(0 3px 30px 0 rgba(255, 255, 255, .6));
                    // .prefix-box-shadow(0 3px 20px 0 rgba(190, 243, 255, .4));
                    .tip {
                        opacity: 1;
                        width: auto;
                        padding: 0 20px;
                        // .prefix-box-shadow(0 5px 10px 0 rgba(0, 166, 124, .4));
                        .prefix-box-shadow(0 3px 10px 0 rgba(53, 25, 255, 0.3));
                        // .prefix-box-shadow(0 3px 15px 0 rgba(255, 255, 255, .4));
                        // .prefix-box-shadow(0 3px 15px 0 rgba(255, 255, 255, .08));
                    }
                }
                &.add {
                    background-color: rgba(255, 255, 255, .2);
                    &:hover {
                        background-color: rgba(255, 255, 255, .6);
                    }
                }
            }
        }
        .appsbar-split {
            margin: 13px auto;
            width: 40px;
            border-top: 1px solid rgba(255,255,255, .2);
            // border-top: 1px solid rgba(255,255,255, .05);
        }
    }
}

.leftpad-enter-active {
    left: -240px;
    .prefix-animation(animate-leftpad .25s ease-out .15s);
}
.leftpad-leave-active {
    .prefix-animation(animate-leftpad .25s ease-out reverse);
}
.prefix-keyframes(animate-leftpad, {
    0% { left: -240px; }
    100% { left: 0; }
});

.leftpadsmall-enter-active {
    left: -60px;
    .prefix-animation(animate-leftpadsmall .25s ease-out .15s);
}
.leftpadsmall-leave-active {
    .prefix-animation(animate-leftpadsmall .2s ease-out reverse);
}
.prefix-keyframes(animate-leftpadsmall, {
    0% { left: -60px; }
    100% { left: 0; }
});

.layout-right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    background: rgba(255, 255, 255, .1);
    // .prefix-gradient(240deg, rgba(255, 255, 255, .2), rgba(52, 138, 199, .2));
    // .prefix-gradient(45deg, rgba(172,146,235, .8), rgba(79,194,233, .9));
    .prefix-box-shadow(0 5px 30px 0 rgba(79,194,233, .3));
    // .prefix-box-shadow(0 5px 50px 0 rgba(157, 0, 255, 0.3));
}

.rightpad-enter-active {
    right: -400px;
    .prefix-animation(animate-rightpad .15s ease-out .15s);
}
.rightpad-leave-active {
    .prefix-animation(animate-rightpad .15s ease-out reverse);
}
.prefix-keyframes(animate-rightpad, {
    0% { right: -400px; }
    100% { right: 0; }
});


.adminpage {
    // background: #fff;
    // color: #fff;
    .topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        // padding-left: 20px;
        height: 50px;
        // background: rgba(255,255,255,.3);
        background: rgba(255,255,255,.2);
        .topbar-left {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            padding-right: 360px;
        }
        .topbar-right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 360px;
            padding: 0 20px;
            text-align: right;
            .searchbar {
                margin-right: 10px;
            }
        }
    }
    .content {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,.1);
    }
}

.apps-container {
    margin: 20px;
    .apps-group {
        padding: 20px 0 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        // border-bottom: 1px solid rgba(255,255,255,.05);
        font-size: 0;
        .apps-item {
            position: relative;
            top: 0;
            display: inline-block;
            font-size: 14px;
            margin-right: 20px;
            margin-bottom: 20px;
            text-decoration: none;
            .prefix-transition();
            .ico {
                display: block;
                margin: 0 auto 10px;
                width: 58px;
                height: 58px;
                // border: 1px solid rgba(255,255,255,.2);
                background-color: rgba(255,255,255,1);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 58px 58px;
                .prefix-border-radius(9px);
                .prefix-box-shadow(0 2px 3px 0 rgba(19, 74, 94,.1));
                .prefix-transition();
            }
            .tit {
                display: block;
                position: relative;
                z-index: 2;
                width: 96px;
                height: 26px;
                line-height: 28px;
                // color: rgb(0, 184, 171);
                color: rgba(255, 255, 255, .3);
                font-size: 13px;
                text-align: center;
                .prefix-transition(color linear .3s);
            }
            &:after {
                opacity: 0;
                content: "";
                display: block;
                position: absolute;
                z-index: 1;
                top: 70px;
                left: 48px;
                bottom: 0;
                right: 0;
                width: 0;
                .prefix-border-radius(13px);
                // .prefix-gradient(25deg, rgba(0, 79, 147, .8), rgba(0, 166, 124, .9));
                .prefix-gradient(~'25deg, rgba(113, 56, 238, .9), rgba(38, 155, 194, .9)');
                // .prefix-gradient(25deg, rgba(195, 55, 100, 1), rgba(29, 38, 113, 1));
                .prefix-transition();
            }
            &:hover {
                top: -2px;
                .ico {
                    background-color: rgba(255,255,255,1);
                    .prefix-box-shadow(0 5px 30px 3px rgba(165, 222, 255, .5));
                }
                .tit {
                    color: rgb(255,255,255);
                }
                &:after {
                    opacity: 1;
                    width: 96px;
                    left: 0;
                    // .prefix-box-shadow(0 5px 10px 0 rgba(0, 166, 124, .4));
                    .prefix-box-shadow(0 3px 10px 0 rgba(53, 25, 255, 0.3));
                    // .prefix-box-shadow(0 8px 15px 0 rgba(195, 55, 100, .5));
                    // .prefix-box-shadow(0 5px 15px 0 rgba(255, 255, 255, .4));
                    // .prefix-box-shadow(0 5px 15px 0 rgba(255, 255, 255, .07));
                }
            }
        }
    }
}
